<template>
    <a-card style="width: 100%;background-color:gainsboro;">
        <div class="head">
            <br>
            <div class="card_head">商家入驻</div>
            <br>
            <a-card style="width: 80%;height:300px; background-image:url(../../public/imgs/吉品汇/吉品汇-首页_03.jpg);background-size: cover;">
                <!--
                <div class="title">
                    <h3>品牌方一键入驻 I WANNA IN!</h3>
                </div>
                -->
                <h3>已入驻<span>{{ brandNum }}</span>家品牌</h3>
            </a-card>
        </div>
        <div class="category">
            <br>
            <div class="card_head">材料分类</div>
            <br>
            <!--
            <a-card style="width: 80%;">
                <template #extra><a href="#">more</a></template>
                <img src="/imgs/categories.png" style="width: 1000px;" alt="categories">
            </a-card>
            -->
        </div>
        <div class="hotBrands">
            <br>
            <div class="card_head">热搜品牌</div>
            <br>
            <div class="card_body">
                <a-card :title= hotBrands[0] :bordered="false" style="width: 20%;">
                    <div><span>品牌名称</span><span style="float: right;">热度值</span></div>
                    <div v-for="brandData in brandDatas"><span>{{brandData.brandName}}</span><span style="float: right;">{{brandData.hotPoints}}</span></div>
                </a-card>
                <a-card :title= hotBrands[1] :bordered="false" style="width: 20%;">
                    <div><span>品牌名称</span><span style="float: right;">热度值</span></div>
                    <div v-for="brandData in brandDatas"><span>{{brandData.brandName}}</span><span style="float: right;">{{brandData.hotPoints}}</span></div>
                </a-card>
                <a-card :title= hotBrands[2] :bordered="false" style="width: 20%;">
                    <div><span>品牌名称</span><span style="float: right;">热度值</span></div>
                    <div v-for="brandData in brandDatas"><span>{{brandData.brandName}}</span><span style="float: right;">{{brandData.hotPoints}}</span></div>
                </a-card>
                <a-card :title= hotBrands[3] :bordered="false" style="width: 20%;">
                    <div><span>品牌名称</span><span style="float: right;">热度值</span></div>
                    <div v-for="brandData in brandDatas"><span>{{brandData.brandName}}</span><span style="float: right;">{{brandData.hotPoints}}</span></div>
                </a-card>
            </div>
            <!--
            <a-card style="width: 80%;">
                <template #extra><a href="#">more</a></template>
                <img src="/imgs/brands.png" style="width: 1200px;height: 220px;" alt="brands">
            </a-card>
            -->
        </div>
        <div class="manual">
            <br>
            <div class="card_head" style="width: 80%;">产品手册<a href="#">more</a></div>
            <br>
            <div class="card_body">
                <a-card :title= manuals[0] :bordered="false" style="width: 20%;" @click = "jmpSupplierDetail()">
                    <img src="../../public/imgs/吉品汇/吉品汇-产品手册详情_10.jpg" style="width: 100%;">
                </a-card>
                <a-card :title= manuals[1] :bordered="false" style="width: 20%;" @click = "jmpSupplierDetail()">
                    <img src="../../public/imgs/吉品汇/吉品汇-产品手册详情_10.jpg" style="width: 100%;">
                </a-card>
                <a-card :title= manuals[2] :bordered="false" style="width: 20%;" @click = "jmpSupplierDetail()">
                    <img src="../../public/imgs/吉品汇/吉品汇-产品手册详情_10.jpg" style="width: 100%;">
                </a-card>
                <a-card :title= manuals[3] :bordered="false" style="width: 20%;" @click = "jmpSupplierDetail()">
                    <img src="../../public/imgs/吉品汇/吉品汇-产品手册详情_10.jpg" style="width: 100%;">
                </a-card>
            </div>
            <br>
            <div class="card_body">
                <a-card :title= manuals[4] :bordered="false" style="width: 20%;" @click = "jmpSupplierDetail()">
                    <img src="../../public/imgs/吉品汇/吉品汇-产品手册详情_10.jpg" style="width: 100%;">
                </a-card>
                <a-card :title= manuals[5] :bordered="false" style="width: 20%;" @click = "jmpSupplierDetail()">
                    <img src="../../public/imgs/吉品汇/吉品汇-产品手册详情_10.jpg" style="width: 100%;">
                </a-card>
                <a-card :title= manuals[6] :bordered="false" style="width: 20%;" @click = "jmpSupplierDetail()">
                    <img src="../../public/imgs/吉品汇/吉品汇-产品手册详情_10.jpg" style="width: 100%;">
                </a-card>
                <a-card :title= manuals[7] :bordered="false" style="width: 20%;" @click = "jmpSupplierDetail()">
                    <img src="../../public/imgs/吉品汇/吉品汇-产品手册详情_10.jpg" style="width: 100%;">
                </a-card>
            </div>
            <!--
            <a-card style="width: 80%;">
                <template #extra><a href="#">more</a></template>
            </a-card>
            -->
        </div>
    </a-card>
</template>

<script lang="ts" setup>
    import { ref,reactive } from 'vue';
    interface brandData{
        brandName:string,
        hotPoints:Number
    }
    let brandNum = "500+"
    let hotBrands = ref(["材料类","家装类","能源类","机械类"])
    let brandDatas:Array<brandData> = [
        {brandName:'三棵树', hotPoints:10080}
    ]
    let manuals = ["xx品牌手册","xx品牌手册","xx品牌手册","xx品牌手册","xx品牌手册","xx品牌手册","xx品牌手册","xx品牌手册"]
    
    import { useRouter } from 'vue-router';
    const router = useRouter()
    function jmpSupplierDetail(){
        router.push({
        path: '/supplierDetail',
        query: {
            //通过传id或可以起到类似id作用的值实现展示不同案例
            id: '200'
        }
    })
    }
</script>

<style scoped>
.head{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}
.card_head{
    width: 80%;
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: rgb(0, 0, 0);
    text-indent: 20px;
    opacity: 0.5;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 25px;
    font-weight: bold;
}
.card_head a{
    position: absolute;
    right: 15%;
}
.card_body{
    width: 80%;
    height: 100%;
    margin: auto auto auto auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.category{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}
.categoryDetail{
    width: 80%;
}
.hotBrands{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}
.manual{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}
.title{
    width: 40%;
    margin: 0 auto;
    background-color: orange;
    opacity: 0.5;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.5s;
}
h3{
    font-size: 40px;
    color: white;
    text-align: center;
    opacity: 1;
    position: absolute;
    margin: 0;
    bottom:20%;
    left:0;
    right:0;
}
h3 span{
    font-size: 70px;
    font-weight: bold;
    color: rgb(255, 100, 0);
}
.title:hover{
    opacity: 1;
}
img{
    margin: 0 auto;
}
</style>